<template>

  <div class="homeDetail">
    <div class="tabr-nav-title">
       <van-nav-bar
        :title="row.workName"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="homeHeader">
      <div class="homeHeader-left">
        <div class="item">
           <van-button color="#ee7e34" size="mini" plain>问题数 {{ detail.length }}</van-button>
        </div>
      </div>
    </div>

    <div
      class="cardList"
      :style="{
        height:
          row.workState == 1
            ? 'calc(100vh - 190px)'
            : 'calc(100vh - 120px)',
      }"
    >

      <div class="listItem">
        <div class="list">
          <div class="right">工单编号：{{ row.workId}}</div>
        </div>
        <div class="list">
          <div class="right">工单创建时间: {{ formatDate(row.workCreate) }}</div>
        </div>
      </div>

      <!-- 问题上报-点位 -->
      <div class="listItem" v-for="(item, index) in detail" :key="index">
        <div class="title">
           > 问题上报   上报时间 {{ formatDate(item?.generateTime)}}
        </div>

        <div class="list">
          <div class="right">设施类型：{{ getFacilityType(item?.facilityType).text }}</div>
        </div>
        <div class="list">
          <div class="right">问题类型：{{ getProblemTypeList(item?.issueType).text }}</div>
        </div>
        <div class="list">
          <div class="right">是否现场解决：{{ item.issueState == 4 ? '是' : '否' }}</div>
        </div>
        <div class="list">
          <div class="right">问题描述：{{item.issueDetail }}</div>
        </div>
        <div class="list" style="flex-direction: column; align-items: flex-start">
          <div class="left">附件:</div>
          <div class="right">
             <van-grid :border="false" :column-num="3">
              <van-grid-item
                v-for="(imgItem, imgIndex) in (item.files || [])"
                :key="imgIndex"
                >
                <van-image
                  :src="imgItem.previewUri"
                  @click="myShowImagePreview(index, imgIndex)"
                />
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </div>

    <div class="detailFoot" v-if="row.workState == 1">
      <div style="flex: 1;">
         <van-button color="#f08c89" size="small" @click="cardClick('problem')">问题上报</van-button>
      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showImagePreview } from 'vant'
import { getPatrolPointDetail } from '@/api/identification'
import { formatDate, getFacilityType, getProblemTypeList } from '@/utils/common'
const router = useRouter()
const route = useRoute()
const row = ref({})
const detail = reactive([])
const query = route.query

const myShowImagePreview = (pindex: number, index: number) => {
  const list = detail[pindex]
  const images = (list.files || []).map((item: any) => item.previewUri)
  showImagePreview({
    images,
    startPosition: index
  });
}
const cardClick = (type: string) => {
  if (type == 'problem') {
    router.push({
      path: '/patrol/problem',
      query: {
        workId: query.id
      },
    })
  }
}

const onClickLeft = () => history.back()
onMounted(async () => {
  row.value = JSON.parse(route.query.row || '{}')
  console.log(row.value)
  const res = await getPatrolPointDetail(route.query.id)
  if (res.data && res.data.code === 200) {
    Object.assign(detail, {
      ...res.data.data
    })
  }
})
</script>

<style scoped lang="less">
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px 10px 0 10px;
  background: #fff;
  display: flex;
}

.homeHeader-left {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;

  .item {
    margin-right: 5px;
    margin-bottom: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}

.cardList {
  overflow-y: auto;
  padding: 0 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  .listItem {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .title {
      border-bottom: 1px solid;
      padding: 10px 0;
      font-size: 14px;
    }

    .list {
      display: flex;
      color: #9b9b9b;
      margin-top: 10px;
      align-items: center;
    }
  }
}

.van-button--mini {
  padding: 0 20px !important;
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}
</style>

